<template>
  <div class="salary-card">
    <!-- 卡片头部 -->
    <div class="card-header">
      <div class="company-info">
        <h1>字节跳动</h1>
        <h2>1-2 工程师</h2>
      </div>
      <el-button type="primary" class="add-salary">添加薪酬</el-button>
    </div>
    
    <!-- 卡片主体 -->
    <div class="card-body">
      <!-- 薪酬信息 -->
      <div class="salary-info">
        <div class="salary-text">预估总薪酬为：</div>
        <div class="total-salary">￥418,000</div>
        <div class="median-salary">中位年薪</div>
        
        <div class="breakdown">
          <div class="breakdown-item">
            <div>工资/月</div>
            <div class="amount">￥22,000</div>
          </div>
          <div class="breakdown-item">
            <div>年终奖</div>
            <div class="amount">￥152,000</div>
          </div>
          <div class="breakdown-item">
            <div>股票</div>
            <div class="amount">0</div>
          </div>
        </div>
      </div>
      
      <!-- 饼图区域 -->
      <div class="chart-container">
        <canvas ref="chartCanvas"></canvas>
      </div>
    </div>
    
    <!-- 卡片底部 -->
    <div class="card-footer">
      <el-button type="primary" class="detail-btn">查看字节跳动详细数据</el-button>
      <el-button type="primary" class="detail-btn">查看1-2详细数据</el-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js/auto';

export default {
  setup() {
    const chartCanvas = ref(null);
    
    onMounted(() => {
      renderChart();
    });
    
    const renderChart = () => {
      if (!chartCanvas.value) return;
      
      const ctx = chartCanvas.value.getContext('2d');
      
      // 薪酬数据
      const salaryData = {
        monthly: 22000 * 12,
        bonus: 152000,
        stock: 0
      };
      
      // 总和 (用于计算百分比)
      const total = salaryData.monthly + salaryData.bonus + salaryData.stock;
      
      // 创建环形图
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['工资', '年终奖', '股票'],
          datasets: [{
            data: [
              Math.round((salaryData.monthly / total) * 100),
              Math.round((salaryData.bonus / total) * 100),
              salaryData.stock
            ],
            backgroundColor: ['#1890FF', '#52C41A', '#999'],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          cutout: '65%',  // 环的大小
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              callbacks: {
                label: function(context) {
                  const labelIndex = context.dataIndex;
                  const value = context.dataset.data[context.dataIndex];
                  
                  // 自定义工具提示内容
                  if (labelIndex === 0) return `月工资: ￥${(salaryData.monthly / 12).toLocaleString()} × 12`;
                  if (labelIndex === 1) return `年终奖: ￥${salaryData.bonus.toLocaleString()}`;
                  return `股票: ￥${salaryData.stock.toLocaleString()}`;
                }
              }
            }
          }
        }
      });
    };
    
    return {
      chartCanvas
    };
  }
}
</script>

<style scoped>
.salary-card {
  width: 500px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.company-info h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #1d2129;
}

.company-info h2 {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  color: #86909c;
}

.add-salary {
  background: #fff;
  color: #3370ff;
  border: 1px solid #3370ff;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}

.card-body {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.salary-info {
  flex: 1;
  padding-right: 20px;
}

.salary-text {
  font-size: 14px;
  color: #4e5969;
  margin-bottom: 4px;
}

.total-salary {
  font-size: 32px;
  font-weight: 700;
  color: #1d2129;
  margin: 8px 0;
}

.median-salary {
  font-size: 14px;
  color: #86909c;
  margin-bottom: 24px;
}

.breakdown {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f3f5;
}

.breakdown-item div:first-child {
  color: #4e5969;
  font-size: 14px;
}

.breakdown-item .amount {
  font-weight: 500;
  color: #1d2129;
  font-size: 15px;
}

.chart-container {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.detail-btn {
  width: 48%;
  background: #3370ff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px;
}
</style>